<template>
	<view class="toTop" :style=" {'right': props.ifShow?'20rpx':'-100rpx'}">
		<van-icon size="50rpx" color='white' name="back-top" @click="scrollToTop" />
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		ifShow: {
			type: Boolean,
			default: false
		}
	})
	// v-if="props.ifShow"
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300,
		});
	};
	watch(() => props.ifShow, (newValue, oldValue) => {
		console.log(`ifShow changed from ${oldValue} to ${newValue}`);
		// 根据 newValue 执行一些操作
	});
</script>

<!-- 父页面通过这种方式监听滚动 -->
<!-- 	import {
		onPageScroll
	} from '@dcloudio/uni-app';
	const ifShowToTop = ref(false)
	onPageScroll((e) => {
		if (e.scrollTop > 400) {
			ifShowToTop.value = true
			console.log(ifShowToTop.value);
		} else {
			ifShowToTop.value = false
		}
	}); -->

<style lang="less" scoped>
	.toTop {
		height: 100rpx;
		width: 100rpx;
		background-color: rgba(185, 255, 251, 0.8);
		border-radius: 100%;
		position: fixed;
		right: 20rpx;
		bottom: 100rpx;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 200rpx;
		transition: all ease-in-out 0.5s;
	}
</style>